<template>
  <div class="personal-cont">

    <div class="my-course">
      <div class="title">
        <div class="lab-title">学习课程</div>
        <div class="tit-Item"><span><em class="active">按学习时间进行排序</em> <em>按加入时间进行排序</em></span><span><em class="active"></em></span>
        </div>
      </div>

      <div class="cont">
        <div v-for="course in courseList" class="col-lg-6">
          <div class="item">
            <div class="imgIco"><!--<img src="/static/images/asset-timg.png" width="60" height="28" alt="">--></div>
            <div class="title"><span class="lab">{{course.courseName}} </span><span
              class="status">学习中</span>
              <div class="aft">● ● ●
                <ul></ul>
              </div>
            </div>
            <div class="about"><span class="lab">正在学习</span> {{course.teachplanName}} </div>
            <div class="time">上次学习时间: {{course.startTime | formatDate}} </div>

            <div class="parting"></div>
            <div class="butItem text-center">
              <router-link :to="'/learning/'+course.courseId+'/'+course.teachplanId" class="golearing" target="_blank">继续学习</router-link>
              <a @click="collect_course(course.courseId)" class="classcom">课程收藏</a></div>
          </div>

        </div>
        <div class="clearfix"></div>
      </div>
    </div>
<!--    <div id="listcont">-->
<!--      <li><a href="#">课程成绩</a></li>-->
<!--      <li><a href="#">联系老师</a></li>-->
<!--      <li><a href="#">课程延期</a></li>-->
<!--      <li><a href="#">退出课程</a></li>-->
<!--    </div>-->
  </div>
</template>

<script>
    import * as courseApi from '../api/course'
    import * as systemApi from '@/base/api/system'
    import utilApi from '../../../common/utils';

    export default {
        components: {},
        data() {
            return {
                userId: '',
                page: 1,
                size: 20,
                courseList: [{
                    courseId: "4028fe8170f29ab40170f3af885b0003",
                    courseName: "英语高级课程",
                    endTime: null,
                    id: "4028fe8172239ce40172239f73480001",
                    startTime: "2020-05-17T17:12:32.000+0000",
                    status: null,
                    teachplanId: "4028fe81718e019f01718e0654ba0000",
                    teachplanName: "测试",
                    userId: "4028fe8172098388017209843d2b0000",
                    valid: null
                }]
            }
        },

        methods: {
            //获得当前登录用户
            refresh_user: function () {
                let activeUser = utilApi.getActiveUser();
                if (activeUser) {
                    this.logined = true;
                    this.userId = activeUser.userid;
                }
            },
            //收藏课程
            collect_course:function(courseId){
                courseApi.collect_course(this.userId,courseId).then((res)=>{
                    if (res.success) {
                        this.$message({
                            message: '收藏成功',
                            type: 'success'
                        });
                    } else {
                        if(res.message){
                            this.$message({
                                message: res.message,
                                type: 'error'
                            });
                        }else{
                            this.$message.error('收藏失败');
                        }
                    }
                });
            }
        },
        created() {
            //获取当前登录用户
            this.refresh_user();
            courseApi.get_learning(this.userId).then((res) => {
                if (res) {
                    this.courseList = res;
                }
            });
        },
        mounted() {

        }
    }

</script>

<style>
  @import './../../../../static/plugins/normalize-css/normalize.css';
  /*@import './../../../../static/plugins/bootstrap/dist/css/bootstrap.css';*/
  @import './../../../../static/css/page-learing-personal.css';

</style>
